<template>
	<view style="padding-bottom: 150rpx;">
		<view class="bg">
			<view>
				<view style="font-size: 34rpx;">
					萌萌安家
				</view>
				<view class="u-margin-top-20">家庭装修就来萌萌安家</view>
				<view class="u-margin-top-40 u-font-weight title ">{{id==8?'家装设计':id==9?'工装设计':id==10?'园林设计':''}}</view>
				<view class="u-margin-top-40">专业设计师为您营造【理想家】</view>
			</view>

			<view style="margin-top: 40rpx;">
				<u-image :src="$ftpUrl('/commonDesign.png')" width="240" height="240" border-radius="40"></u-image>
			</view>
		</view>


		<view class="u-padding-30 shadow" style="width: 700rpx;margin: auto;">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="realname" label-width="200">
					<u-input v-model="form.realname" input-align="right" placeholder="请输入姓名"/>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" label-width="200">
					<u-input v-model="form.mobile" input-align="right" maxlength="11" placeholder="请输入联系电话"/>
				</u-form-item>
				
				<!-- <u-form-item label="联系邮箱" prop="email" label-width="200">
					<u-input v-model="form.email" input-align="right" placeholder="请输入联系邮箱"/>
				</u-form-item> -->
				
				<u-form-item :border-bottom="false" label="需求备注" label-width="200" label-position="top" prop="remark">
					<u-input placeholder="请输入备注" type="textarea" v-model="form.remark"></u-input>
				</u-form-item>
			</u-form>
			<u-form-item :border-bottom="false" label="户型图上传" label-width="200" label-position="top">
				<upload ref="image1" type="image" @uploaded="uploaded" :afterLoadUrl="form.image_url1"
					background="#FFE3DC" borderRadius="20" iconColor="#FF5D39" width="160" height="160"
					defaultLength="1"></upload>

			</u-form-item>
			<u-form-item :border-bottom="false" label="参考图上传" label-width="200" label-position="top">
				<upload ref="image2" type="image" @uploaded="uploaded" :afterLoadUrl="form.image_url2"
					background="#FFE3DC" borderRadius="20" iconColor="#FF5D39" width="160" height="160"
					defaultLength="3"></upload>
			</u-form-item>
		</view>


		<view class="u-padding-30">
			<u-section :arrow="false" :right='false' title="图文案例" lineColor="#FF5D39" fontSize="34"></u-section>

			<wr-article  ID="14" v-if="id==8"></wr-article>
			
			<wr-article  ID="15" v-if="id==9"></wr-article>
			
			<wr-article  ID="16" v-if="id==10"></wr-article>
		</view>



		<view class="bottomFix">
			<u-button @click="add" shape="circle" :custom-style="{background:'#FF5D39',color:'#fff',width:'500rpx',}">
				提交设计</u-button>

		</view>


<u-toast ref="uToast" />
		<!-- <image :src="$ftpUrl('/goDesignBook.png')" class="rightfix"></image> -->


	</view>
</template>

<script>
	import payway from '@/common/wxpay.js';
	import upload from "@/components/upload_img.vue";
	import rules from "@/common/rule.js";
	export default {
		components: {
			upload
		},
		data() {
			return {

				
				user: {},
				autoplay: true,
				buyUrgentPrice:"",
				form: {
					mobile: "",
					realname: "",
					remark: "",
					// email:""
				},
				rules: rules,
				id:"",
				
				
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if(options.id){
				uni.setNavigationBarTitle({
					title:options.id==8?'家装设计':options.id==9?'工装设计':options.id==10?'园林设计':''
				})
				this.id=options.id;
				
			}
			
			
			
			
			
			this.$u.api.userInfo().then(res => {
				this.user = res;
			})



			this.getList()

		},
		methods: {
			add(e) {
				
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.$refs.image1.afterUploadImgList.length) {
							uni.$u.toast("请上传户型图")
							return
						}
						this.$u.post('/indent/specialDesign', {
							realname:this.form.realname,
							mobile:this.form.mobile,
							remark:this.form.remark,
							image:this.$refs.image1.afterUploadImgList.join(","),
							reference:this.$refs.image2.afterUploadImgList.length?this.$refs.image2.afterUploadImgList.join(",") : '',
							// email:this.form.email,
							type:this.id
						}).then(res => {
							let packages = res.package;
							let {
								noncestr,
								timestamp,
								signtype,
								paysign
							} = res;
							payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
								this.$refs.uToast.show({
									title: '提交成功,请耐心等候客服联系~',
									type: 'success',
									back:true
								})
							}).catch(err => {
								uni.navigateBack({
							
								})
							})					
						}).catch(err => {
				     	})
					} else {
						console.log('验证失败');
					}
				});
			},
			getList() {
				this.$u.post('/index/queue', {}).then(res => {
					this.list = res
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	.bg {
		width: 750rpx;
		padding: 20rpx 20rpx 20rpx 50rpx;
		background: linear-gradient(to top, #FFCB87, #FF9D62);
		height: 400rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.title {
		font-size: 50rpx;
		letter-spacing: 10rpx;

	}

	.u-form-item__message {
		text-align: right;
	}

	.list {
		display: flex;
		justify-content: space-between;
	}


	.new {
		background: #FFFFFF;
		margin: 20rpx auto;
		width: 690rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.scroll-view {
		height: 300rpx;
		position: relative;
		overflow: hidden;

	}
</style>
